<template>
    <div>
        <ul class="itemList">
            <li class="goods" v-for="(item, index) in goodslist" :key="index">
                <img class="image" :src="item.img" alt="">

                <div class="bd">
                    <div class="geli"></div>
                    <h4 class="name">{{ item.goods_name }}</h4>
                    <p class="price">
                        <span>￥{{ item.price }}</span>
                        <span class="zhe">￥{{ item.discount }}</span>
                    </p>
                    <!-- 商品描述 -->
                    <div v-if="isShowList">
                        <hr>
                        <div class="descbox">
                            <p class="desc">{{ item.describe }}</p>
                        </div>
                    </div>
                    <div v-else class="buttonbox">
                        <el-button class="button" color="#b4a078"><span>加入购物车</span></el-button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    props: {
        goodslist: {
            type: Array
        },
        isShowList: {
            type: Boolean,
            default: true
        }
    },
    setup() {
    }

}
</script>

<style lang="less" scoped>
.itemList {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;

    li:hover {
        background-color: #f4f0ea;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
    }

    .goods {
        width: 245px;
        height: 401px;
        margin-right: 10px;
        box-sizing: border-box;
        margin-bottom: 15px;

        .image {
            width: 245px;
            height: 245px;
            background-color: pink;
        }

        .bd {
            padding-bottom: 20px;

            .name {
                width: 166px;
                margin: 0 auto 4px;
                text-align: center;
                max-height: 40px;
                line-height: 20px;
                // display: -webkit-box;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .geli {
                height: 20px;
                font-size: 0;
                color: #fff;
                width: 200px;
                margin: 0 auto 3px;
                overflow: hidden;
            }

            .price {
                margin: 0;
                padding: 0;
                color: #d4282d;
                text-align: center;

                span {
                    display: inline-block;
                    overflow: hidden;
                    height: 20px;
                    line-height: 22px;
                }

                .zhe {
                    margin-left: 6px;
                    font-size: 12px;
                    color: #999;
                    text-decoration: line-through;
                }



            }

            hr {
                display: block;
                width: 130px;
                height: 1px;
                padding: 0;
                margin: 6px auto 14px;
                border: 0;
                border-top: 1px solid #e8e8e8;
            }

            .descbox {
                width: 200px;

                .desc {
                    padding-left: 18px;
                    width: 100%;
                    text-align: center;
                    line-height: 18px;
                    color: #999;
                    font-size: 13px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            .buttonbox {
                margin-top: 10px;
                display: flex;
                justify-content: center;
                .button {
                    color: #fff;
                    span{
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>